<template>
  <el-table
    :data="tableData"
    style="width: 100%; margin-top: 20px"
    height="500"
  >
    <el-table-column
      prop="realName"
      label="姓名"
      align="center"
      :formatter="formatterCellval"
    >
    </el-table-column>
    <el-table-column
      prop="className"
      label="班级"
      align="center"
      :formatter="formatterCellval"
    >
    </el-table-column>
    <el-table-column
      prop="stuNum"
      label="学号"
      align="center"
      :formatter="formatterCellval"
    >
    </el-table-column>
    <el-table-column prop="maxScore" label="最高分" align="center">
    </el-table-column>
    <el-table-column prop="minScore" label="最低分" align="center">
    </el-table-column>
    <el-table-column prop="avgScore" label="平均分" align="center">
    </el-table-column>
    <el-table-column prop="finishedCount" label="已学任务" align="center">
    </el-table-column>
    <el-table-column prop="studyingCount" label="在学任务" align="center">
    </el-table-column>
    <el-table-column prop="notStartCount" label="未学任务" align="center">
    </el-table-column>
    <el-table-column fixed="right" label="操作" align="center">
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="jumpRoute(scope)"
          type="text"
          size="small"
        >
          批阅
        </el-button>
        <el-button
          @click.native.prevent="handleDeleteDialog(scope)"
          type="text"
          size="small"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
  },
  computed: {},
  methods: {
    //无内容显示占位符
    formatterCellval(row, column, cellValue, index, n) {
      if (!cellValue && column.label === "姓名") {
        return row.realName || row.nickName || row.email || row.regName || "无";
      }
      return cellValue || "无";
    },
    // 跳转批阅
    jumpRoute(item) {
      this.$router.push({
        name: "Correct",
        query: {
          currNo: this.$route.query.currNo,
          courseID: this.$route.query.courseID,
          // Multiple: JSON.stringify([item.row.userID]),
          chooseNo: item.row.chooseNo,
        },
        params: {
          id: this.$route.query.currNo,
        },
      });
    },
    // 删除选修对话框
    handleDeleteDialog(item) {
      this.deleteStudent = item;
      this.$emit("showDeleteDialog", item);
    },
  },
};
</script>

<style lang="stylus"></style>